import {  ref, computed } from 'vue'
import { mkApi } from "../utils/monkeyTool/monkeyApi";
interface Position {
  boxTop:string,
  boxLeft:string
}
let realWidth = ref<number>()

const position = computed<Position>(()=>{
   // body可见区域宽度
  const bodyWidth:number = document?.body?.clientWidth ?? 0  
  const bodyHight =   document.documentElement.clientHeight
  let boxTop = mkApi.BOX_TOP.get() 
  let boxLeft = mkApi.BOX_LEFT.get() 
  // 处理最左侧边缘宽度切换的异常
  if( realWidth.value && realWidth.value + boxLeft - bodyWidth > 0){
    return{
      boxTop:boxTop + "px",
      boxLeft:bodyWidth - realWidth.value + "px"
    }
  }
  // 某些异常脱离屏幕后的处理
  if(boxTop < 0 || boxTop > bodyWidth || boxTop > bodyHight || boxTop < 0){
    return{
      boxTop:'20px',
      boxLeft:"20px"
    }
  }
  return{
    boxTop:boxTop + "px",
    boxLeft:boxLeft + "px"
  }
})

export {
  position,
  realWidth
}